import React, { Component } from 'react'
import {Route,Switch} from 'react-router-dom'
import './App.css'
import Home from './pages/Home'
import About from './pages/About'
import MyNavLink from './components/MyNavLink'
import Header from './components/Header'
/* 
   这一小节的内容也很简单，讲一下路由的精准匹配和模糊匹配
   我们知道，要想正确使用react-router-dom来实现路由跳转，一共需要更新path和匹配path对应组件这两步
   其中，当 Link标签中定义的path为二级（或以上级别）的路由，那么只需要其第一级的path和Route定义的path一致即可匹配成功
   反之，如果是Link表中定义的path只是一级路由，而Route不存在完全匹配的路由，则匹配失败。
   举例来说，<Link to="/home/a/b">  <Route path="/home" component={Xxxx} /> 在模糊匹配的条件下，是可以成立的
          而 <Link to="/home"> <Route path="/home/a/b" component={Xxxx} /> 这种情况下是不可以匹配成功的
    上述这种情况其实不难理解
    我们真正去匹配一个组件时，应该是以Route配置为准，从父组件(一级路由)一步一步地匹配到子组件（n级路由）的
    而精准匹配就比较好理解，就是必须要路径完全匹配。虽然我们会觉得很好用，但实际上，exact 在实际应用中还是尽量要谨慎使用，避免出现二级(n级)
    路由匹配不到的问题出现。
    
*/
export default class App extends Component {


    render() {
        return (
            <div>
                <div className="row">
                    <Header/>
                </div>
                <div className="row">
                    <div className="col-xs-2 col-xs-offset-2">
                        <div className="list-group">
                            {/* 
                            使用Link标签代替 a 标签，这一步是用于实现第一步：浏览器URL的变更
                            */}
                            <MyNavLink to="/about/test">About</MyNavLink>
                            <MyNavLink to="/home/test">Home</MyNavLink>
                        </div>
                    </div>
                    <div className="col-xs-6">
                        <div className="panel">
                            <div className="panel-body">
                                {/* 
                                在App.js中，定义路由，路由规定了path对应跳转的组件
                                 当路由中出现了2个或者2个以上的path同时匹配的情况，那么实际上
                                 对应的路由组件都会被渲染。如果我们想要说只渲染(挂载)第一个匹配
                                 上的组件的话，那么我们可以使用<Switch>组件来解决
                                */}
                                <Switch>
                                {/* exact={true} 可以简写成 exact */}
                                <Route  path="/about" component={About}/>
                                <Route  path="/home" component={Home}/>
                                </Switch>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
